<template>
  <div class="contain">
    <div class="title">{{ title }}</div>
    <div class="column" v-for="(item, key) in list" v-bind:key="key">
      <div>{{ item.name }}:</div>
      <div>{{ item.number }}{{ item.union }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlueBox',
  props: {
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
.contain {
  margin: 2px 20px;
  overflow: auto;
  max-height: 385px;
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  background-color: rgba(135, 207, 235, 0.459);
  width: 115px;
  .title {
    margin-bottom: 5px;
  }
  .column {
    display: flex;
    margin-bottom: 4px;
  }
}
</style>
